<template>
    <Row>
        <Card>
            <Form ref="search" :model="params" label-position="right" :label-width="90" inline>
                <FormItem label="停车场" prop="parkingName">
                    <div class="filters-input">
                        <el-select v-model="params.parkingId" :clearable="true" placeholder="请选择停车场"
                                   class="normal-input">
                            <el-option v-for="item in parkingData" :value="item.id" :key="item.id" :label="item.parkingName">
                            </el-option>
                        </el-select>
                    </div>
                </FormItem>
                <FormItem label="支付方式" prop="parkingName">
                    <div class="filters-input">
                        <el-select v-model="params.payType" placeholder="请选择支付方式" class="normal-input"
                                   :clearable="true">
                            <el-option value="1" label="微信条码支付"></el-option>
                            <el-option value="2" label="微信代扣"></el-option>
                            <el-option value="3" label="支付宝条码支付"></el-option>
                            <el-option value="4" label="支付宝代扣"></el-option>
                            <el-option value="5" label="现金"></el-option>
                        </el-select>
                    </div>
                </FormItem>
                <FormItem label="入场时间" prop="parkingName">
                    <div class="filters-input">
                        <DatePicker type="daterange" v-model="params.inTime" placement="bottom-start"
                                    placeholder="请选择入场时间"
                                    @on-change="handleInTimeChange" class="normal-input"></DatePicker>
                    </div>
                </FormItem>
                <FormItem label="支付状态" prop="parkingName">
                    <div class="filters-input">
                        <el-select v-model="params.payStatus" placeholder="请选择支付状态" class="normal-input"
                                   :clearable="true">
                            <el-option value="0" label="未支付"></el-option>
                            <el-option value="2" label="已支付"></el-option>
                            <el-option value="3" label="已部分退款"></el-option>
                            <el-option value="4" label="已全部退款"></el-option>
                            <el-option value="5" label="支付失败"></el-option>
                            <el-option value="6" label="无需支付"></el-option>
                        </el-select>
                    </div>
                </FormItem>
                <FormItem label="离场时间" prop="parkingName">
                    <div class="filters-input">
                        <DatePicker type="daterange" v-model="params.outTime" placement="bottom-start"
                                    placeholder="请选择离场时间"
                                    @on-change="handleOutTimeChange" class="normal-input"></DatePicker>
                    </div>
                </FormItem>
                <FormItem label="支付时间" prop="parkingName">
                    <div class="filters-input">
                        <DatePicker type="daterange" v-model="params.payTime" placement="bottom-end"
                                    placeholder="请选择支付时间"
                                    @on-change="handlePayTimeChange" class="normal-input"></DatePicker>
                    </div>
                </FormItem>
                <FormItem label="车牌号" prop="parkingName">
                    <div class="filters-input">
                        <Input type="text" v-model="params.carNum" placeholder="请输入车牌号" class="normal-input"></Input>
                    </div>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSearch">搜索</Button>
                </FormItem>
            </Form>
            <Table stripe :columns="titleTable" :data="data.list ? data.list : []"></Table>
            <Page style="margin: 10px 0;" :total="data.total" :current="data.pageNum" :page-size="data.pageSize"
                  show-total show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
        <Modal v-model="modalDetail" fullscreen title="停车详情">
            <Card title="基本信息">
                <Form>
                    <Row :gutter="16" type="flex" align="middle"
                         style="height: 80px; border-bottom: 1px dashed #F0F0F0">
                        <Col span="8">
                            <FormItem label="停车场：" :label-width="120">
                                <p class="content">{{recordInfo.parkingName}}</p>
                            </FormItem>
                            <!--<p>停车场：</p>-->
                        </Col>
                        <Col span="8">
                            <FormItem label="车牌号：" :label-width="120">
                                <p class="content">{{recordInfo.carNum}}</p>

                            </FormItem>
                            <!--<p>车牌号：</p>-->
                        </Col>
                        <Col span="8">
                            <FormItem label="停车单号：" :label-width="120">
                                <p class="content">{{recordInfo.parkedCode}}</p>
                            </FormItem>
                            <!--<p>停车单号：</p>-->
                        </Col>
                    </Row>
                    <Row :gutter="16" type="flex" align="middle"
                         style="height: 80px; border-bottom: 1px dashed #F0F0F0">
                        <Col span="8">
                            <!--<p>入场时间：</p>-->
                            <FormItem label="入场时间：" :label-width="120">
                                <p class="content">{{recordInfo.inRoadTime}}</p>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!--<p>离场时间：</p>-->
                            <FormItem label="离场时间：" :label-width="120">
                                <p class="content">{{recordInfo.outRoadTime}}</p>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!--<p>停车时长（分钟）：</p>-->
                            <FormItem label="停车时长（分钟）：" :label-width="120">
                                <p class="content">{{recordInfo.outMessage}}</p>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="16" type="flex" align="middle"
                         style="height: 80px; border-bottom: 1px dashed #F0F0F0">
                        <Col span="8">
                            <!--<p>入场时间：</p>-->
                            <FormItem label="应付费：" :label-width="120">
                                <p class="content">{{recordInfo.autoMoney}}</p>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!--<p>离场时间：</p>-->
                            <FormItem label="车辆类型：" :label-width="120">
                                <p class="content">{{recordInfo.carType}}</p>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!--<p>停车时长（分钟）：</p>-->
                            <FormItem label="备注：" :label-width="120">
                                <p class="content">{{recordInfo.outMessage}}</p>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Card>
            <Card v-for="paymentInfo in paymentInfoList" title="支付信息" style="margin-top: 20px">
                <Form>
                    <Row :gutter="16" type="flex" align="middle"
                         style="height: 80px; border-bottom: 1px dashed #F0F0F0">
                        <Col span="8">
                            <FormItem label="支付状态：" :label-width="120">
                                <p class="content">{{payStatus[paymentInfo.payStatus]}}</p>
                            </FormItem>
                            <!--<p>停车场：</p>-->
                        </Col>
                        <Col span="8">
                            <FormItem label="支付方式：" :label-width="120">
                                <p class="content">{{orderPayType[paymentInfo.payType]}}</p>

                            </FormItem>
                            <!--<p>车牌号：</p>-->
                        </Col>
                        <Col span="8">
                            <FormItem label="支付时间：" :label-width="120">
                                <p class="content">{{paymentInfo.payTime}}</p>
                            </FormItem>
                            <!--<p>停车单号：</p>-->
                        </Col>
                    </Row>
                    <!--<Row :gutter="16" type="flex" align="middle" style="height: 80px; border-bottom: 1px dashed #F0F0F0">-->
                    <!--<Col span="8">-->
                    <!--&lt;!&ndash;<p>入场时间：</p>&ndash;&gt;-->
                    <!--<FormItem label="是否有抵扣：" :label-width="120">-->
                    <!--<p class="content">{{recordInfo.discountId}}</p>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                    <!--<Col span="8">-->
                    <!--&lt;!&ndash;<p>离场时间：</p>&ndash;&gt;-->
                    <!--<FormItem label="折扣名称：" :label-width="120">-->
                    <!--<p class="content">{{recordInfo.discountName}}</p>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                    <!--<Col span="8">-->
                    <!--&lt;!&ndash;<p>停车时长（分钟）：</p>&ndash;&gt;-->
                    <!--<FormItem label="抵扣金额：" :label-width="120">-->
                    <!--<p class="content">{{recordInfo.discountMoney}}</p>-->
                    <!--</FormItem>-->
                    <!--</Col>-->
                    <!--</Row>-->
                    <Row :gutter="16" type="flex" align="middle"
                         style="height: 80px; border-bottom: 1px dashed #F0F0F0">
                        <Col span="8">
                            <!--<p>入场时间：</p>-->
                            <FormItem label="商户支付单号：" :label-width="120">
                                <p class="content">{{paymentInfo.tradeNo}}</p>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!--<p>离场时间：</p>-->
                            <FormItem label="微信/支付宝支付单号：" :label-width="120">
                                <p class="content">{{paymentInfo.transactionId}}</p>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!--<p>停车时长（分钟）：</p>-->
                            <FormItem label="支付金额：" :label-width="120">
                                <p class="content">{{paymentInfo.payFee}}</p>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="16" type="flex" align="middle"
                         style="height: 80px; border-bottom: 1px dashed #F0F0F0">
                        <Col span="8">
                            <!--<p>入场时间：</p>-->
                            <FormItem label="是否退款：" :label-width="120">
                                <p class="content"></p>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!--<p>离场时间：</p>-->
                            <FormItem label="退款金额：" :label-width="120">
                                <p class="content"></p>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!--<p>停车时长（分钟）：</p>-->
                            <FormItem label="退款时间：" :label-width="120">
                                <p class="content"></p>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Card>
        </Modal>
        <Modal v-model="formVisible" :mask-closable="false" :closable="false" title="修改车牌号"
               width="900">
            <Form :model="modal" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <FormItem label="车牌号码" prop="name">
                    <Input v-model="modal.carNum" placeholder="原车牌号码"/>
                </FormItem>
                <FormItem label="入场时间" prop="name">
                    <Input v-model="modal.inRoadTime" placeholder="入场时间" readonly/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit">确定</Button>
            </div>
        </Modal>

    </Row>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                params: {},
                modalDetail: false,
                formVisible: false,
                modal:{},
                payStatus: ['未支付', '未支付', '已支付', '已部分退款', '已全部退款', '支付失败','无需支付'],
                payType: ['未知', '微信条码支付', '微信代扣', '支付宝条码支付', '支付宝代扣', '现金'],
                orderPayType: ['未知', '微信', '支付宝', '现金'],
                titleTable: [
                    {
                        title: '车场名称',
                        key: 'parkingName'
                    },
                    {
                        title: '车牌号',
                        key: 'carNum'
                    },
                    {
                        title: '入场时间',
                        key: 'inRoadTime',
                    },
                    {
                        title: '离场时间',
                        key: 'outRoadTime',
                    },
                    {
                        title: '支付状态',
                        key: '',
                        render: (h, params) => {
                            const text = this.payStatus[params.row.payStatus];
                            return h('p', text)
                        }
                    },
                    {
                        title: '操作',
                        key: '',
                        align:"center",
                        width:250,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    on: {
                                        'click': () => {
                                            this.handleView(params.row)
                                        }
                                    },
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    }
                                }, '详情'),
                                h('Button', {
                                    on: {
                                        'click': () => {
                                            this.handleRefund(params.row)
                                        }
                                    },
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    }
                                }, '退款'),
                                h('Button', {
                                    on: {
                                        'click': () => {
                                            this.handleUpdate(params.row)
                                        }
                                    },
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    }
                                }, '修改车牌'),
                            ])
                        }
                    },
                ],
                data: [],
                parkingData: [],
                recordInfo: {},
                paymentInfoList: []
            }
        },
        created: function () {
            this.init()
        },
        methods: {
            handleSearch: function () {
                console.log(this.params)
                this.loadData()
            },
            handleInTimeChange: function (date) {
                this.params.inTime = date
            },
            handleOutTimeChange: function (date) {
                this.params.outTime = date
            },
            handlePayTimeChange: function (date) {
                this.params.payTime = date
            },
            //取消
            onCancel() {
                this.formVisible = false;
            },
            handleSubmit(){
                this.postRequest("/api/parking/updateCarNum", {"id":this.modal.id,"carNum":this.modal.carNum}).then(resp => {
                    console.log(resp)
                    if (resp.code == 20000) {
                        this.loadData();
                        this.$Message.info('修改成功');
                        this.formVisible = false;
                        return
                    }
                    this.$Message.error(resp.message)
                })
            },
            handleView: function (row) {
                console.log(row)
                this.modalDetail = true
                this.recordInfo = row
                this.getPaymentInfo(row.id)
            },
            handleRefund: function (row) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '确定要发起退款吗？',
                    onOk: () => {
                        this.$Message.info('Clicked ok');
                    },
                    onCancel: () => {

                    }
                })
            },
            init: function () {
                this.getRequest('/api/parking/all').then(resp => {
                    console.log(resp)
                    if (resp.code == 20000) {
                        this.parkingData = resp.data
                    }
                })
                this.loadData()
            },
            loadData: function () {
                let url = "/api/parking/records";
                this.params.page_num = this.data.pageNum
                this.params.page_size = this.data.pageSize
                this.postRequest(url, this.params).then(resp => {
                    console.log(resp)
                    if (resp.code == 20000) {
                        this.data = resp.data
                        return
                    }
                    this.$Message.error(resp.message)
                })
            },
            getPaymentInfo: function (parkedId) {
                this.getRequest('/api/parking/payment/' + parkedId).then(resp => {
                    console.log(resp)
                    if (resp.code == 20000) {
                        if (resp.data != null) {
                            this.paymentInfoList = resp.data
                        }
                        return;
                    }
                    this.$Message.error(resp.message)
                })
            },
            handlePage(value) {
                console.log('current page = ' + value)
                this.data.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {

                this.data.pageSize = value;
                this.loadData();
            },
            handleUpdate(row){
                this.formVisible = true;
                this.modal = row;
            }

        }
    }
</script>

<style scoped>
    .content {
        color: #808695;
        font-size: medium;
    }

    .normal-input {
        width: 250px;
    }
</style>
